// @ts-ignore
import { append, indexOf, map, remove } from 'ramda';
import React, { useRef, useState } from 'react';
import { Icon } from '../icon';
import { Input } from '../Input/input';
import classNames from 'classnames';
import useClickOutside from '../hooks/useClickOutside';
import './style.less';
import Transition from '../Transition';

export interface SelectProps {
  /**
   * 选项
   */
  options: string[];
  /**
   * 默认选中的选项
   */
  defaultSelectedOptions?: string[];
  /**
   * the value was changed
   */
  onChange: (opts: string[]) => void;
}

export const MultipleSelect: React.FC<SelectProps> = ({
  defaultSelectedOptions,
  options,
  onChange,
}) => {
  const [selectedOptions, setSelectedOptions] = useState<string[]>(
    defaultSelectedOptions || [],
  );

  const componentRef = useRef(null);
  const [showList, setShowList] = useState(false);

  // @ts-ignore
  const selectOptionList = map((opt: string) => {
    if (selectedOptions.includes(opt)) {
      return { name: opt, selected: true };
    }
    return { name: opt, selected: false };
  })(options);

  // @ts-ignore
  const handleItemClick = option => {
    setSelectedOptions(preSelectedOptions => {
      if (preSelectedOptions.includes(option.name)) {
        // @ts-ignore
        const index = indexOf(option.name)(preSelectedOptions);
        // @ts-ignore
        const values = remove(index, 1)(preSelectedOptions) as string[];
        onChange(values);
        return values;
      } else {
        // @ts-ignore
        const values = append(option.name)(preSelectedOptions);
        onChange(values);
        return values;
      }
    });
  };
  // @ts-ignore
  const handleOptionClick = optionName => {
    setSelectedOptions(preSelectedOptions => {
      if (preSelectedOptions.includes(optionName)) {
        // @ts-ignore
        const index = indexOf(optionName)(preSelectedOptions);
        // @ts-ignore
        const values = remove(index, 1)(preSelectedOptions) as string[];
        onChange(values);
        return values;
      }
      return preSelectedOptions;
    });
  };
  useClickOutside(componentRef, () => {
    setShowList(false);
  });
  return (
    <div className="viking-select-wrapper" ref={componentRef}>
      <Input
        icon={showList ? 'arrow-up' : 'arrow-down'}
        placeholder=""
        onOptionClick={handleOptionClick}
        onIconClick={() => setShowList(!showList)}
        onFocus={() => setShowList(true)}
        value=""
      >
        {selectedOptions}
      </Input>
      <Transition
        in={showList}
        animation="zoom-in-top"
        timeout={300}
        // wrapper={true}
      >
        <ul className="select-options">
          {selectOptionList.map(option => {
            const classes = classNames('select-option-item', {
              selected: option.selected,
            });
            return (
              <li
                key={option.name}
                className={classes}
                onClick={() => handleItemClick(option)}
              >
                {option.name}
                {option.selected && <Icon icon="check" />}
              </li>
            );
          })}
        </ul>
      </Transition>
    </div>
  );
};
